﻿//=====================================================================================
//Class name:       CHierarchyNavigation
//Created date:     2014/06
//=====================================================================================
function CHierarchyNavigation(options) {
    //----------------------------------------------------------------
    //init properties value 
    //----------------------------------------------------------------
    this.options = options;
    this._container = $(options.container);
    this._template = this._container.html();
}
CHierarchyNavigation.prototype.render = function () {
    //declaration of the actions PURE has to do
    directive = {
        'div.nav_temp_group': {
            'row<-menuitems': {
                'div.navHeader': function (ctxt) {
                    //console.log(ctxt.row.item._level);
                    var facss = ctxt.row.item.FaCss ? ctxt.row.item.FaCss :
                                (ctxt.row.item._level == 1 ? 'fa-credit-card' : 'fa-caret-right'); //fa-folder-o

                    return "<i class='fa " + facss + "'></i>" + ctxt.row.item.Name;
                },
                'div.navHeader@item-data': function (ctxt) {
                    return front.f.getItemData(ctxt.row.item);
                },
                'div.navHeader@class+': function (ctxt) {
                    var level = ctxt.context._level;
                    level = (typeof level == 'undefined') ? 0 : level + 1;
                    return ' navHeader-level' + level;
                    //
                },
                'div.navContent+': function (ctxt) {
                    var markup = '';
                    if (ctxt.row.item.menuitems)
                        markup = rfn(ctxt.row.item);
                    return markup;
                }
            }
        },
        '@meta-data': function (ctxt) {
            //orange,summer,darkblue,classic
            var themes = ['classic', 'web', 'bootstrap'];
            var expandModes = ['singleFitHeight', 'single', 'single'];
            var level = ctxt.context._level;
            level = (typeof level == 'undefined') ? 0 : level + 1;

            //setting for context navigation
            var ret = {
                theme: themes[level],
                expandMode: expandModes[level],
                showArrow: (level == 2 ? false : true)
            };
            return JSON.stringify(ret);
        }
    };

    // note the use of render instead of autoRender, and the 2nd argument
    var rfn = $('.main_navigation').compile(directive);
    $('.main_navigation').render(this.options.datasource, directive);

    //remove temp html when access render
    $('.nav_temp_group').each(function (index, groupItem) {
        var $p = $(groupItem).parent();
        $(groupItem).children().detach().appendTo($p);
        $(groupItem).remove();
    });
}
CHierarchyNavigation.prototype.bindevent = function () {
    var thisClass = this;
    var navSelector = '.' + this.options.classname;

    //----------------------------------------------------------------
    //init to jqxNavigationBar control
    $(navSelector).each(function (index, item) {
        var metadata = JSON.parse($(item).attr('meta-data'));
        var setting = { height: '100%', width: '100%' };
        $.extend(true, setting, metadata);
        $(item).jqxNavigationBar(setting);
    });

    //----------------------------------------------------------------
    //bind click event
    $(navSelector).find('div.jqx-widget-header').each(function (index, item) {
        header = $('div.navHeader', item)[0];
        $(item).attr('item-data', $(header).attr('item-data'));
        $(item).bind('click', function () {
            thisClass.options.callbackItemSelect(this);
        });
    });
}
CHierarchyNavigation.prototype.init = function () {
    this.render();
    this.bindevent();
}
CHierarchyNavigation.prototype.clear = function () {
    this._container.html('');
    this._container.html(this._template);
}
CHierarchyNavigation.afterSelectItem = function (el) {
    var data = $(el).attr('item-data');
    if (!data) {
        console.log('CHierarchyNavigation.afterSelectItem(data) - data is undefined');
        return;
    }

    $('#main_header').html(data);
    console.log('CHierarchyNavigation.afterSelectItem', data);
}

//=====================================================================================
//Class name:       CHierarchyMenu
//Created date:     2014/06
//=====================================================================================
function CHierarchyMenu(options) {
    //----------------------------------------------------------------
    //init properties value 
    //----------------------------------------------------------------
    this.options = options;
    this._container = $(options.container);
    this._template = this._container.html();
}
CHierarchyMenu.prototype.render = function () {
    //declaration of the actions PURE has to do
    var directive = {
        'li': {
            'row<-menuitems': {
                '.+': function (ctxt) {
                    return ctxt.row.item.menuitems ? rfn(ctxt.row.item) : '';
                },
                '@item-data': function (ctxt) {
                    return front.f.getItemData(ctxt.row.item);
                },
                'a': 'row.Name'
            }
        }
    };
    // note the use of render instead of autoRender, and the 2nd argument
    var rfn = $('ul.menu_template').compile(directive);
    $('ul.menu_template').render(this.options.datasource, directive);
}
CHierarchyMenu.prototype.bindevent = function () {
    var thisClass = this;

    //----------------------------------------------------------------
    //init to jqxNavigationBar control
    var defSetting = { width: '100%', height: '30px', showTopLevelArrows: true };
    $(this.options.rootSelector).jqxMenu(defSetting);

    //----------------------------------------------------------------
    //bind click event
    $(this.options.rootSelector).on('itemclick', function (event, a) {
        //get the clicked li element.
        var el = event.args;
        thisClass.options.callbackItemSelect(el);
    });
}
CHierarchyMenu.prototype.init = function () {
    this.render();
    this.bindevent();
}
CHierarchyMenu.prototype.clear = function () {
    this._container.html('');
    this._container.html(this._template);
}

//=====================================================================================
//Class name:       CToolbar
//Created date:     2014/06
//=====================================================================================
function CToolbar(options) {
    //----------------------------------------------------------------
    //init properties value 
    //----------------------------------------------------------------
    this.options = options;
    this.container = $(options.container);

    this.default = {
        template: "<ul class='jqxToolbar'><li class='jqxButton'><i class='fa'></i></li></ul>"
    }
}
CToolbar.prototype.render = function () {
    var directive = {
        'li': {
            'row<-buttons': {
                '.+': 'row.Name',
                '@id': function (ctxt) {
                    return 'jqxButton_' + ctxt.row.item.Code;
                },
                '@disabled': function (ctxt) {
                    return ctxt.row.item.Disable ? 'disabled' : '';
                },
                '@class': function (ctxt) {
                    var css = ctxt.row.item.Code == '' ? 'jqxToolbarSeperator' : 'jqxButton';
                    css += ctxt.row.item.Align == 'right' ? ' jqxButton-Right' : '';
                    return css;
                },
                '@title': function (ctxt) {
                    var title = ctxt.row.item.Title;
                    title += ctxt.row.item.Hotkey ? ' (' + ctxt.row.item.Hotkey + ')' : '';
                    return title;
                },
                'i@class+': function (ctxt) {
                    return ctxt.row.item.FaCss ? ' ' + ctxt.row.item.FaCss : '';
                }
            }
        }
    }
    this.container.find('ul').render(this.options.datasource, directive);
    this.container.find('li.jqxButton').jqxButton({ height: '16' });
}
CToolbar.prototype.bindevent = function () {
    $(this.options.datasource.buttons).each(function (index, item) {
        if (item.Code && item.Callback) {
            
            if (item.Disable) {
                //-----------------------------------------------------------
                //Disabled button
                $('#jqxButton_' + item.Code).jqxButton({ disabled: true });
            }
            else {
                //-----------------------------------------------------------
                //Click event
                $('#jqxButton_' + item.Code).on('click', function () {
                    eval(item.Callback);
                });

                //-----------------------------------------------------------
                //Trigger hotkey
                if (item.Hotkey) {
                    console.log(item.Hotkey);
                    $(document).on('keydown', null, item.Hotkey, function () {
                        eval(item.Callback);
                    });
                }
            }
        }
    });
}
CToolbar.prototype.init = function () {
    this.clear();
    this.render();
    this.bindevent();
}
CToolbar.prototype.clear = function () {
    var template = this.default.template;
    this.container.html(template);
}